/*
  学习目标：更新阶段
  1. 两个钩子函数
    1.1 render
    1.2 componentDidUpdate
      场景: 🔔做缓存
  2. 触发更新阶段的两种方式
    1.1 setState
    1.2 props改变
  3. 注意事项
   3.1 在更新阶段的钩子函数中, 不能调用setState
*/

import React, { Component } from 'react';

export default class App extends Component {
  // 场景: 类似vue中的updated, 做缓存
  // cdup
  componentDidUpdate() {
    // ❌ componentDidUpdate中 setState会造成死循环
    // this.setState({ count: this.state.count + 1 });
  }

  state = {
    count: 100,
  };

  render() {
    // ❌ render中 setState会造成死循环
    // this.setState({ count: this.state.count + 1 });
    const { count } = this.state;
    return (
      <div>
        <h1>{count}</h1>
        <button onClick={() => this.setState({ count: count + 1 })}>点我</button>
        <Child count={count}></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    console.log('this.props.count  ----->  ', this.props.count);
    return <div></div>;
  }
}

// 1. render 更新中
// 2. componentDidUpdate 更新后

// 2. setState  props改变
